<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--v-for:增强for-->
    <select>
        <option v-for="addr in addrs">{{addr}}</option>
    </select>
    <!--v-for:带索引-->
    <select>
        <option v-for="(addr,i) in addrs">{{i+1}}---{{addr}}</option>
    </select>
</div>
<script src="../js/vue.js"></script><!--引入vue.js-->
<script>
    //创建Vue核心对象
    new Vue({
        el: "#app", //指定受管理的标签
        data() {    //定义数据模型
            return {
                username: "",
                url: "http://www.baidu.com",
                count: 3/*count初始化值为3*/,
                addrs: ["北京", "上海", "广州", "深圳"]
            }
        },
        methods:{   //定义函数
            show() {
                alert("我被点了。。。")
            }
        },
        //生命周期方法（钩子函数）
        /*mounted:function (){}*/
        mounted() {
            alert("加载完成。。。");
        }
    });
</script>
</body>
</html>